import React, { Component } from 'react'
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import { Loading, Select } from '@icedesign/base';
// import { GetUrlParam, LoginReq } from '../../../../baseConfig';
import { generateSunburstChartOption } from '../../../../echarts-figures.js'
import PropTypes from 'prop-types'

var echarts = require('echarts');

// @DataBinder({
//   ChartData: {
//     url: `${global.constants.GOLDEYEGETHOST}cattle/similar_company?`,
//     type: 'get',
//     params: {
//       // secu_code: this.props.stockCode,
//       // Type:'static',
//       // tab:
//     },
//     defaultBindingData: {
//       numbers: [],
//       layer: 0
//     }
//   }
// })
export default class SunburstChart extends Component {

  static propTypes = {
    changeTime: PropTypes.func.isRequired,
    stockCode: PropTypes.string.isRequired,
    isLoading: PropTypes.bool,
    hasData: PropTypes.bool.isRequired
  };
  
  constructor(props) {
    super(props);
    let id = ( '_' + Math.random()).replace('.','_');
    this.state = {
        // message:false,
        isLoading: false,
        value: '当前期',
        text:'该部分呈现市场上与该公司静态相似的其余公司。越靠近中心处则相似度越高；点击各公司部分以观测相似度最高的部分'
    }
  }

  // componentDidMount() {
  //   this.getData();
  // }

  // getData() {
    // this.props.updateBindingData('ChartData',{
    //   'params': {
    //     secu_code: GetUrlParam("secu_code"),
    //     type:'static',
    //     tab:this.state.value
    //   }
    // }, (data) => {
      // const numbers = data.data.numbers;
      // const layer = data.data.layer;
      // const numbers = this.props.numbers;
      // const layer = this.props.layer;

      // if(!numbers || numbers.length === 0 || numbers[0].children.length == 0){
      //   this.setState({
      //     message:true,
      //   })
      //   console.log("numbers",numbers)
      // }else{
      //   this.initChart(generateSunburstChartOption(
      //     '静态相似公司',
      //     numbers,
      //     layer 
      //   ));
      // }
      
      // if(data.status !== 'NOT_PRIVILEGED'){
        
      // }
    // });
  // }

  // initChart(config) {
  //   // console.log("myChart",document.getElementById(this.state.chartId))
  //   let myChart = echarts.getInstanceByDom(document.getElementById(this.state.chartId));
  //   if( myChart === undefined){
  //       // console.log("getElementById",document.getElementById(this.state.chartId))
  //       myChart = echarts.init(document.getElementById(this.state.chartId));
  //   }
  //   myChart.setOption(config);
  //   window.onresize =()=>{
  //     myChart.resize();
  //   }
  // }

  onChange(value) {
    this.setState({
      value
    });
    this.props.changeTime(value);
  }

  render() {
    // const { ChartData } = this.props.bindingData;   
    const dataSource = ['当前期', '一年','两年','三年']
    const {hasData, chartId, isLoading} = this.props;
    return (
      <div className="chart-container" style={{ width: '100%'}}>
        <IceContainer>
          <Loading 
            style={{width: "100%"}}
            visible={ isLoading ? true : false }
            shape="fusion-reactor"
          >
            <Select
              style={{position:'absolute',left:'10px',top:'0px',zIndex:'2'}}
              value={this.state.value}
              dataSource={dataSource}
              onChange={this.onChange.bind(this)}
            />
            {hasData && 
                <div style={{
                  fontSize: '25px',
                  width:'1200px',
                  height: '500px',
                  paddingTop:'160px',
                  // lineHeight: '500px',
                  textAlign: 'center',
                  color:'#151415'
                }}>
                    <img src="./assetc/Group.png" width={130} height={118} />
                    <p style={{fontSize:'18px',fontWeight:'bold',color:'#cdcdcd'}}>没有相关数据</p>
                  </div>
                
            }
            { !hasData && <div id={chartId} style={{width: "1200px", height: "680px"}}></div>}
            
            <div>
              <div style={{fontSize:'18px',fontWeight:'bold',marginBottom:'10px'}}>指标解释</div>
              <div dangerouslySetInnerHTML={{ __html: this.state.text }} className="tab-text"></div>
            </div>   
          </Loading>
        </IceContainer>

      </div>
    )
  }
}
